<!-- <router-link :to="{path:'/warehouseDetail'}">
          <el-button size="mini" type="text" >通过点击仓库名字跳转到库存详情页</el-button>
        </router-link>  -->

<template>
  <!--这里是入库管理页面-->
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col :span="2.5">
        <el-button icon="el-icon-menu">
          黄金品类
        </el-button>
      </el-col>
     
      <el-col :span="20">
            <el-row>
      <el-col :span="6" :offset="6">
        <el-button-group>
          <el-button type="primary" icon="el-icon-watermelon" plain @click="all">全部</el-button>
          <el-button type="primary" icon="el-icon-cherry" plain @click="single">单品</el-button>
          <el-button type="primary" icon="el-icon-apple" plain @click="normal">通品</el-button>
        </el-button-group>
        <!-- <el-radio-group v-model="radio" @change="radioChange">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="单品"></el-radio-button>
          <el-radio-button label="通品"></el-radio-button>
        </el-radio-group> -->
      </el-col>
      
      
      <el-col :span="4" :offset="1">
        <el-input v-model="input" placeholder="请输入产品条码"></el-input>  
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        
      </el-col>
      <el-col :span="1" :offset="0.5">
        <el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
      </el-col>
    </el-row>
      </el-col>
    </el-row>

    <!-- 表格 -->

    <el-table :data="tableData"
              style="width: 100%">
      <el-table-column label="序号"
                       align="center"
                       width="50">
        <template slot-scope="scope">
          <span>
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="productInfo"
                       align="center"
                       label="产品"
                       width="180">

        <!-- <router-link :to="{path:'/warehouseDetail'}"> -->
          <!-- <el-button size="mini" type="text" ></el-button> -->
        <!-- </router-link>                -->
      </el-table-column>

      <el-table-column prop="depository"
                       align="center"
                       label="仓库"
                       width="100">
                       <template slot-scope="scope">
          <span v-if="scope.row.depository == 1 ">
            A仓库
          </span>
          <span v-if="scope.row.depository == 2 ">
           B仓库
          </span>
          <span v-if="scope.row.depository == 3 ">
           C仓库
          </span>
          <span v-if="scope.row.depository == 4 ">
           D仓库
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="region"
                       align="center"
                       label="区域"
                       width="100">
                       <template slot-scope="scope">
          <span v-if="scope.row.region == 1 ">
            华南区域
          </span>
          <span v-if="scope.row.region == 2 ">
           东北区域
          </span>
          <span v-if="scope.row.region == 3">
           西南区域
          </span>
        </template>
      </el-table-column>
      
      <el-table-column prop="productStatus"
                       align="center"
                       label="状态"
                       width="80">
       <template slot-scope="scope">
          <span v-if="scope.row.productStatus == 1 ">
            已售
          </span>
          <span v-if="scope.row.productStatus == 2 ">
           在售
          </span>
        </template>

      </el-table-column>                
      
      <el-table-column prop="condition"
                       align="center"
                       label="成色"
                       width="80">
                       <template slot-scope="scope">
          <span v-if="scope.row.condition == 1 ">
            千足金999
          </span>
          <span v-if="scope.row.condition == 2 ">
          万足金9999
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="singleOrNormal"
                       align="center"
                       label="类型"
                       width="80">
                       <template slot-scope="scope">
          <span v-if="scope.row.singleOrNormal == 1 ">
            单品
          </span>
          <span v-if="scope.row.singleOrNormal == 2 ">
          通品
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="productCode"
                       align="center"
                       label="条码"
                       width="80">
      </el-table-column>
      <el-table-column prop="weight"
                       align="center"
                       label="重量(g)"
                       width="80">
      </el-table-column>
      <el-table-column prop="amount"
                       align="center"
                       label="数量"
                       width="100">
      </el-table-column>
      <el-table-column prop="perGram"
                       align="center"
                       label="克工费"
                       width="170">
      </el-table-column>
      
    </el-table>

    <!-- 分页 -->
    <el-pagination style="float:right"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="1"
                   :page-sizes="[10, 20, 30]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getSingleList,getNormalList,getList} from '@/api/warehouse/warehouseManager/index'
export default {
  inject: ['reload'],
  data() {
    return {
      input: '',
      date: '',
      //需求单列表
      tableData: [],
      //分页
      pageNum: 1,
      pageSize: 10,
      total: null,
      TypeAndCodeVo:{
        singleOrNormal:'',
        productCode:'',
      }
    }
  },
  methods: {
    
    //按输入产品条码查
    search() {
      //清空
      this.tableData = []
      if (this.input == '') {
        this.$message.error("请输入查询信息")
        return;
      }
      this.start();
    },
    //刷新页面
    refresh() {
      //this.reload();
      this.start();
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val
      this.start()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.start()
    },
    //全部产品
    all(){
      this.tableData = [];
      this.input='';
      this.start()
    },
    //单品
    single(){
      var TypeAndCodeVo={};
      TypeAndCodeVo.singleOrNormal = 1;
      console.log(TypeAndCodeVo);
      this.tableData = []
      getSingleList(this.pageNum,this.pageSize,TypeAndCodeVo).then(res => {
        console.log(res)
         this.tableData = res.data.list
         this.total = res.data.total
        this.loading = false;
      });

    },
    //通品
    normal(){
      var TypeAndCodeVo={};
      TypeAndCodeVo.singleOrNormal = 2;
      console.log(TypeAndCodeVo);
      this.tableData = []
      getNormalList(this.pageNum,this.pageSize,TypeAndCodeVo).then(res => {
        console.log(res)
         this.tableData = res.data.list
         this.total = res.data.total
        this.loading = false;
      });
    },
    //查询所有产品信息
    start() {

    
    var TypeAndCodeVo={};
      TypeAndCodeVo.productCode = this.input;
      console.log(TypeAndCodeVo);
    //查找全部产品信息
    getList(this.pageNum,this.pageSize,TypeAndCodeVo).then(res => {
        console.log(res)
         this.tableData = res.data.list
         this.total = res.data.total
        this.loading = false;
      });
    },
      
    
  },
  created() {
    //展示需求表
    this.start()
  },
}
</script>

<style scoped>
</style>
